<template>
	<view class="content">
		<view class="blur-bg" :style="{ background: `transparent url(${my_bg}) center bottom repeat-x` }"></view>
		<!-- <view class="blur-bg"></view> -->
		<view class="content-title">
			<image
				class="img-center"
				src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.nosdn.127.net%2F3uGZ4OQqJRqsQCTccp%3Djw5ytQG%3DuCIibu4CH3gg211cK81539924044439.jpg&refer=http%3A%2F%2Fdingyue.nosdn.127.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647744029&t=daff67d5751f8c538a4b2570f4569ed9"
				mode=""
			></image>
			<view class="content-text">
				<view class="content-box" v-for="(item, index) in titleText" :key="index">
					<text v-if="item.title" class="title">{{ item.title }}:</text>
					{{ item.text }}
				</view>
			</view>
		</view>
	</view>
</template>

<script> 
import my_bg from '@/static/image/my_bg.jpg'
export default {
	data() {
		return {
			titleText: [
				{
					title:'介绍',
					text: '我叫罗冠景，英文名...,目前没有英文名。'
				},
				{
					title: '角色',
					text: '前端攻城狮 —— 一个 接近00后的90后程序员，终身学习者。'
				},
				{
					title: '评价',
					text: '对技术充满热情，充满学习的动力。—— 只要投入时间去学，没有学不会的东西。'
				},
				{
					title: '技能',
					text: '主要做的是前端，梦想成为全栈攻城狮的男人。'
				},
				{
					title: '心态',
					text: '爱生活，爱阅读，爱学习，爱拼搏，爱运动。'
				},
				{
					title: '心路历程',
					text: `小时候最喜欢学校的电脑课，经常在课上偷偷倒腾 QQ 空间，没有钱开黄钻，就学别人植入各种“代码”来装扮。

中学时候看了《黑客帝国》，迷恋上了 Hacker，想象对着满屏幕英文，劈里啪啦一顿乱敲帅气的样子。

上大学前信息相对闭塞，不知道计算机专业出来能做什么，于是填志愿去了自动化（保底也能去工厂作业）。但对软件的兴趣甚于硬件，因此利用课余时间自学 Java 技术栈。

走出校门，运气好通过了面试，转型到了 IT 行业。干了一年运维和辅助开发的工作后，开始主做前端。前端能及时给出视觉反馈的特点，成了我热衷这个岗位的最大原因。

主业前端并不影响我持续学习的渴望，不论是程序员的各项软硬技能，还是其他领域的知识，我都会在空余时间不断接触和尝试。

有着去大厂的梦想，不过条条大路通罗马，大厂是一条路但不是唯一的路，因而充实好自己最重要，有机会就努力抓住机会，没有机会就自己创造机会。

我是一个普通的程序员，一个平凡的 90 后，但我不想让自己的人生平庸，奥力给！`
				}
			], 
			my_bg
		};
	},
	onLoad() {},
	methods: {}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	min-height: 100vh;
	padding: 20upx;
	box-sizing: border-box;
	// background-repeat: repeat-y;

	.blur-bg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		filter: blur(8px);
		// background-image: linear-gradient(to right , #F7F8F8, #ACBB78);
		background-size: cover;
		z-index: -1;
	}
	.content-title {
		width: 100%;
		// text-indent: 2rem;
		letter-spacing: 5upx;
		word-break: break-all;

		.img-center {
			display: block;
			width: 200upx;
			height: 200upx;
			overflow: hidden;
			border-radius: 50%;
			border: 5px solid #876800;
			margin: 0 auto;
		}
		.content-text {
			line-height: 50upx; 
			margin-top: 20upx; 
			.content-box {
				color: #111;
				.title {
					float: left;
					font-size: 1.2rem;
					font-weight: 600;
					margin-right: 10upx;
					color: #000;
				} 
			}
		}
	}
}
</style>
